
@keyframes burgerAnimationSlide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  49% {
    transform: translateX(-0.7em);
    opacity: 0;
  }
  50% {
    transform: translateX(0.7em);
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.burger.burger-slide {
  .burger-lines {
    transition: .1s all .15s;
    &:after,
    &:before {
      width: 2em;
      transition: .1s all .15s;
    }
  }
  &:not(.open) {
    animation-name: burgerAnimationSlide;
    animation-duration: 0.4s;
    background-color: transparent;
  }
  &.open {
    .burger-lines {
      animation-name: burgerAnimationSlide;
      animation-duration: 0.4s;
      background-color: transparent;
      &:before,
      &:after {
        left: 0.5em;
        top: 0px;
      }
      &:before {
        transform: rotate(-45deg);
      }
      &:after {
        transform: rotate(45deg);
      }
    }
  }
}